<template>
  <div>
    <!-- 头部 -->
    <div v-if="crashEdit" class="mod-config">
      <div class="div-s">
      <div class="title-b">
    <el-form :model="params" :label-position="labelPosition" :inline="true" label-width="70px" class="queryFormed">
    <el-form-item label="录入类型">
            <el-select v-model="params.certificateType">
              <el-option
                v-for="item in certificateTypes"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="姓名">
            <el-input v-model="params.name" clearable placeholder="请填写姓名"></el-input>
          </el-form-item>
    </el-form>
    </div>
       <div class="title-s">
      <el-button class="buttonItemHan" size="mini" type="primary" @click="queryHandle()">搜 索</el-button>
      <el-button class="buttonItem" size="mini" plain @click="queryAll()">重 置</el-button>
      </div>
      </div>
      <!-- 下半部分 -->
      <div class="div-p">
      <div class="title-a">
        <div class="zuofei">
          <div class="in-ts"></div>
          <h3>作废列表</h3>
        </div>
        <div class="fanhui">
          <!-- <span @click="clickVis">返回上级</span> -->
        <el-button type="text" @click="clickVis">返回上级</el-button>

        </div>
      </div>

    <!-- 搜索 -->
    <!-- table -->
    <div>
     <certificate-type :crashTye="crashTye"  @clickCertificateListVisible="clickCertificateListVisible" ref="child" :flag="flag" :params="params"></certificate-type>
    </div>
    </div>
    </div>
    <certificate-crach v-else :isEdited="isEdited" :flag="flag" :visId="visId"></certificate-crach>
  </div>
</template>

<script>
  import CertificateType from './certificate-type'
  // import QueryModel from './query-model-crash'
  import CertificateCrach from './certificate-list-crach'
  export default {
    name:'CertificateinfoCrash',
    data() {
      return {
        certificateListVisibleCrash: true,
        queryModelVisible: false,
        visible: false,
        flag: true,
        params: {
          certificateType:'',
          name:''
        },
        visId:{},
        isEdited: true,
        tenantId: '',
        crashTye:true,
        crashEdit:true,
        labelPosition:'right',
        certificateTypes: [
          {
          value: '',
          label: '--全部--'
        },{
          value: 1,
          label: '在职员工'
        }, {
          value: 2,
          label: '挂靠'
        },
        {
          value: 3,
          label: '非在职员工'
        }
        ],
      }
    },
    components: {
      CertificateType, CertificateCrach
    },
    mounted(){
      this.visible = true
      // this.queryHandle()
    },
    created(){
    // this.clickCrashHeight()
    this.init()
    },
    watch:{
      // params(){
      //   this.$nextTick(() => {
      //     this.$refs.child.getDataList()
      //   })
      // }
    },
    methods: {
      // 返回上级
      clickCertificateCrach(){
      this.crashEdit = true
      },
      // 返回上级
      clickVis(){
      this.$parent.clickAppear()
      },
      queryAll(){
        this.params.name = ''
        this.params.certificateType = ''
        this.$refs.child.getDataList()
      },
      clickCertificateListVisible(row){
      this.visId = row
      this.crashEdit = false
      // console.log(id);
      },
      // clickCrashHeight(){
      // // this.$refs.child.tackHeight()
      // },
      init(tenantId){
        this.visible = true
        this.tenantId = tenantId
        this.$nextTick(() => {
          // this.$refs.child.tackHeight()
          this.$refs.child.getDataList()
        })
      },
      queryHandle(){
        // this.queryModelVisible = true
        this.$nextTick(() => {
          this.$refs.child.getDataList()
        })
      },
      clickReturn(){
       this.$parent.queryAll()
      },
      setParams(params){
        this.params = params

      }
    }
  }
</script>

<style lang="scss" scoped>
.mod-config{
  width: 100%;
  height: 100%;
  background-color: #F5F7FA !important;
  padding:15px;
}
.in-ts{
  width: 5px;
  height: 18px;
  float: left;
  margin-right: 8px;
  background: #6E92E9;
}
/deep/.queryFormed{
.el-form-item{
  margin-bottom: 0px !important;
  margin-left: 15px !important;
}
}
.div-s{
  height: 64px;
  background-color: #ffffff;
  display: flex;
  align-items: center;
}
.div-p{
  background-color: #ffffff;
  margin-top: 15px;
  padding:0 15px 15px 15px;
}
.title-a{
  width: 100%;
  height: 56px;
  padding-right: 10px;
  // margin-left: 3%;
  // margin-right: 3%;
  border-bottom:1px solid #EBEEF5;
  // line-height: 56px;
  .zuofei{
    width: 40%;
    height: 56px;
    h3{
    font-size: 16px;
    color: #000000;
    }
    float: left;
    display: flex;
    align-items: center;
    // margin-left: 20px;
  }
  .fanhui{
    // width: 10%;
    height: 56px;
    font-size: 14px;
    color: #409EFF;
    float: right;
    display: flex;
    align-items: center;
    // padding-right: 30px;
    span{
      float: right;
      // margin-right: 20px;
    }

  }
}
.title-s{
  width: 30%;
}
.title-b{
  width: 70%;
  // height: 56px;
  // margin-left: 3%;
  // margin-right: 3%;
.input-name{
  width: 200px;
}
}
.buttonItemHan{
  float: right;
  margin-left: 8px;
  margin-right: 15px;
  font-size: 14px !important;
}
.buttonItem{
  float: right;
font-size: 14px !important;
}
    .el-drawer__body {
        padding: 20px;
    }

    .el-drawer__body{
      overflow-x:hidden;
      overflow-x:auto;
    }

    .el-upload-dragger{
      width: 100%;
    }
</style>
